{% extends "knn.html" %}

{% block title %}关于k-means{% endblock %}

{% block description %}
<p><b>K-means</b>，亦称K-均值，是发现给定数据集的K个簇的算法，即聚类。</p>
<p><b>工作流程：</b>首先，随机确定K个初始点作为质心。然后将数据集中的每个点分配到一个簇中，具体来讲，为每个点找据其最近的质心，并将其分配给该质心所对应的簇。这一步完成后，每个簇的质心更新为该簇所有点的平均值。</p>
<p><b>K值含义：</b>用户给定的簇的个数，即要将原始数据聚为K类。K的值为一个大于0、小于数据各数的整数。</p>
<p><b>算法优点：</b>实现起来较为容易。</p>
<p><b>算法缺点：</b>可能收敛到局部最小值，在大规模数据集上收敛较慢。</p>
<p><b>适用数据范围：</b>数值型数据。</p>
{% endblock %}


{% block input %}
<div class="span9">
    <form class="bs-example bs-example-form " method="post" name="knn" role="form" action="" enctype="multipart/form-data">
    {% csrf_token %}
    <!--格式-->
    <label>k值:</label>
    <input type="text" class="form-control" placeholder="请输入合适的k值" name="value_k" value="{{ k }}" required="required">
    <input type="file" name="csv" required="required" > 
    <p class="form-btn">
    <button type="submit" class="btn btn-primary btn-lg " name="ok" onclick=draw()>上传文件</button>
    </p>
    </form>
</div>
{% endblock %}


{% block resu %}
{% if result  %}
<hr>
<p><h4>分析结果 </h4></p>
<br>
    {% ifequal length 2 %}

    <div id="k-means2" style="height:500px;margin-left:2%;margin-right:2%;"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('k-means2')); 
myChart.showLoading({text: "图表数据正在努力加载..."});

var option = {
    title : {
        text: 'K-means聚类结果散点图',
        subtext: '结果仅供参考'
    },
    tooltip : {
        padding: 8,
        trigger: 'axis',
        showDelay : 0,
        axisPointer:{
            show: true,
            type : 'cross',
            lineStyle: {
                type : 'dashed',
                width : 1
            }
        }
    },
    legend: {
        data: {{ labels|safe }}
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataZoom : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    xAxis : [
        {
            name : {{ Xname|safe }},
            type : 'value',
            scale:true,
            axisLabel : {
                formatter: '{value}'
            }
        }
    ],
    yAxis : [
        {
            name : {{ Yname|safe }},
            type : 'value',
            scale:true,
            axisLabel : {
                formatter: '{value}'
            }
        }
    ],
    series : {{ data|safe }}
};
        // 为echarts对象加载数据 
        myChart.hideLoading(); 
        myChart.setOption(option);
        
    </script>


    {% else %} 

<!-- 为ECharts准备一个具备大小（宽高）的Dom(训练集属性值>2时) -->
    <div id="knn" style="height:500px;margin-left:2%;margin-right:2%;"></div>   
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts图表
        var myChart = echarts.init(document.getElementById('knn')); 
        
        var option = {
    title : {
        text: '聚类结果雷达图',
        subtext: '结果仅供参考'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        orient : 'vertical',
        x : 'right',
        y : 'bottom',
        data:{{ labels|safe}}
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    polar : [
       {
           indicator : {{ indicator|safe }}
        }
    ],
    calculable : true,
    series : [
        {
            name: '聚类结果雷达图',
            type: 'radar',
            data : {{ data|safe }}
        }
    ]
};
        // 为echarts对象加载数据 
        myChart.setOption(option); 
    </script>
    {% endifequal %}


<hr>
<div class="content">
<p>根据k-means算法，原始数据被聚为<b>{{ k }}</b>类,每一类用上图不同图例表示。</p>
<br><br>
</div>

{% endif %}
{% endblock %}


